<template>
  <div>
    <!--招聘-->
    <!-- nav -->
    <whiteNav></whiteNav>
    <!-- 大logo -->
    <div><img src="../assets/image/招聘banner.png" alt="" /></div>
    <!-- 热招职位 -->
    <div class="hotjob">
      <div class="hotjob-title text-center">{{ $t("hotjobtitle") }}</div>
      <div class="hotjob-subtitle text-center">{{ $t("hotjobsubtitle") }}</div>
      <!-- 下方招聘列表 -->
      <div class="hotjob-list">
        <div class="hotjob-item">
          <div class="item-top">
            <div class="item-top-img">
              <div class="item-imgbox">
                <img src="../assets/image/web.png" alt="" />
              </div>
              <div class="item-top-title">{{ $t("itemtoptitle") }}</div>
            </div>
            <div class="item-top-text">4-6k</div>
          </div>
          <div class="item-bottom">
            <div class="item-bottom-title">{{ $t("itembottomtitle") }}</div>
            <ul class="item-bottom-desc">
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
            </ul>
            <div class="item-bottom-address">
              <span class="address-title"> {{ $t("addresstitle") }}</span>
              <span class="address-text">{{ $t("addresstext") }}</span>
            </div>
          </div>
        </div>
        <div class="hotjob-item">
          <div class="item-top">
            <div class="item-top-img">
              <div class="item-imgbox">
                <img src="../assets/image/web.png" alt="" />
              </div>
              <div class="item-top-title">{{ $t("itemtoptitle") }}</div>
            </div>
            <div class="item-top-text">4-6k</div>
          </div>
          <div class="item-bottom">
            <div class="item-bottom-title">{{ $t("itembottomtitle") }}</div>
            <ul class="item-bottom-desc">
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
              <li class="desc-item">
                {{ $t("descitem") }}
              </li>
            </ul>
            <div class="item-bottom-address">
              <span class="address-title"> {{ $t("addresstitle") }}</span>
              <span class="address-text">{{ $t("addresstext") }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 工作环境 -->
    <div class="workenv">
      <div class="workenv-title text-center">{{ $t("workenvtitle") }}</div>
      <div class="workenv-subtitle text-center">{{ $t("hotjobsubtitle") }}</div>
      <!-- 瀑布流 -->
      <div class="fallimg">
        <div class="fallimg-1">
          <img height="100%" src="../assets/image/环境2.png" alt="" />
        </div>
        <div class="fallimg-2">
          <img src="../assets/image/环境4.png" alt="" />
        </div>
        <div class="fallimg-3">
          <img src="../assets/image/环境3.png" alt="" />
        </div>
        <div class="fallimg-4">
          <img height="100%" src="../assets/image/环境1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- links -->
    <links></links>
    <!-- footer -->
    <myfooter></myfooter>
    <!-- 侧边栏返回顶部 -->
    <returnTop></returnTop>
  </div>
</template>

<script>
import myfooter from "../components/myFooter.vue";
import links from "../components/links.vue";
import whiteNav from "../components/whiteNav.vue";
import returnTop from "../components/returnTop.vue";

export default {
  components: {
    whiteNav,
    myfooter,
    links,
    returnTop,
  },

  name: "employ",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// 移动端
@media (max-width: 768px) {
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共用
  .dflex {
    display: flex;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .mt-20 {
    margin-top: 10px;
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  //   热招职位
  .hotjob {
    background: #f0f4f7;
    padding: 60px 0;
    .hotjob-title {
      font-size: 26px;
      color: #000;
    }
    // .hotjob-subtitle {
    //   padding-bottom: 30px;
    // }

    .hotjob-list {
      margin: 0 auto;
      margin-top: 30px;
      width: 1200px;
      display: flex;
      justify-content: space-between;
      .hotjob-item {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 20px;
        width: 49.5%;
        .item-top {
          padding-bottom: 20px;
          border-bottom: 1px solid #ccc;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-top-img {
            display: flex;
            align-items: center;
            .item-top-title {
              color: #000;
              font-weight: 600;
              font-size: 20px;
              margin-left: 20px;
            }
          }
          .item-top-text {
            color: orange;
            font-weight: 600;
            font-size: 20px;
          }
        }
        .item-bottom {
          .item-bottom-title {
            font-size: 16px;
            font-weight: 600;
            color: #000;
            padding: 20px 0;
          }
          .item-bottom-desc {
            color: #000;
            .desc-item {
            }
          }
          .item-bottom-address {
            padding: 20px 0;
            .address-title {
              color: #000;
              font-size: 16px;
              font-weight: 600;
              padding: 20px 0;
            }
          }
        }
      }
    }
  }
  //   工作环境
  .workenv {
    padding: 30px 0;
    .workenv-title {
      font-size: 26px;
      color: #000;
    }
    .workenv-subtitle {
      margin-bottom: 30px;
    }
    .fallimg {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .fallimg-1 {
        width: 60%;
        margin-bottom: 10px;
      }
      .fallimg-2 {
        width: 35%;
        margin-bottom: 10px;
      }
      .fallimg-3 {
        width: 35%;
        margin-bottom: 10px;
      }
      .fallimg-4 {
        width: 60%;
        margin-bottom: 10px;
      }
    }
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
